import React from "react";
import { Button, Form, Input, Switch, Toast } from "antd-mobile";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { useDispatch } from 'react-redux'
import { loginSuccess } from "../../store/user/userSlice";
// 定义登录组件
const Login = () => {
  const dispatch = useDispatch()
  // 使用useNavigate钩子函数，用于页面跳转
  const navigate = useNavigate();
  // 定义表单提交函数
  const onFinish = async (value) => {
    // 判断是否勾选用户协议
    if (!value.state) {
      // 使用Toast组件显示错误信息
      Toast.show({ content: "请勾选用户协议", icon: "fail" });
      return;
    }

    // 发送登录请求
    const resp = await axios.post("/api/login", value);
    // 解构响应数据
    const { code, data, message } = resp.data;
    // 判断登录是否成功
    if (code === 10000) {
      // 使用Toast组件显示成功信息
      Toast.show({ content: message, icon: "success" });

      // 存储信息 到 仓库
      dispatch(loginSuccess(data))

      // 页面跳转
      navigate("/");
    } else {
      // 使用Toast组件显示错误信息
      Toast.show({ content: message, icon: "fail" });
    }
    // 打印响应数据
    console.log(resp.data);
  };
  return (
    <div>
      <Form
        // 表单布局为水平布局
        layout="horizontal"
        // 表单提交函数
        onFinish={onFinish}
        footer={
          <>
            <Button
              // 按钮样式为块状
              block
              // 按钮颜色为主要颜色
              color="primary"
              // 按钮大小为大型
              size="large"
              // 按钮底部间距为10px
              style={{ marginBottom: 10 }}
              // 按钮类型为提交
              type="submit"
            >
              登录
            </Button>
            <Button block color="warning" size="large">
              重置
            </Button>
          </>
        }
      >
        <Form.Header>
          <h1 style={{ textAlign: "center" }}>用户登录</h1>
        </Form.Header>
        <Form.Item
          label="用户名"
          name="username"
          rules={[
            {
              required: true,
              message: "请输入用户名",
            },
          ]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: "请输入密码",
            },
          ]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          label="请同意<<八维用户协议>>"
          name="state"
          valuePropName="checked"
          childElementPosition="right"
        >
          <Switch></Switch>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Login;
